<template>
    <div class="custom-form">
        <div class="title">教育经历</div>
        <el-form ref="form" :model="form" label-width="0px" :rules="rules">
            <el-form-item label prop="school">
                <el-input v-model="form.school" placeholder="学校名称"></el-input>
            </el-form-item>
            <el-form-item label prop="education">
                <el-select v-model="form.education" placeholder="学历" clearable>
                    <el-option v-for="(v,i) in education" :label="v.name" :value="v.val" :key="i"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label prop="major">
                <el-input v-model="form.major" placeholder="所学专业"></el-input>
            </el-form-item>
            <el-form-item label prop="learnDay">
                <el-date-picker
                    unlink-panels
                    :picker-options="pickerOptions"
                    v-model="form.learnDay"
                    type="daterange"
                    :range-separator="sep"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    start-placeholder="就读时间"
                    end-placeholder
                ></el-date-picker>
            </el-form-item>
        </el-form>
        <div class="save-box">
            <el-button type="primary" @click="preAction">上一步</el-button>
            <el-button type="primary" @click="next('form')">下一步</el-button>
        </div>
    </div>
</template>

<script>
import { getDegree } from '../../../api/registerInfo.js';
import { getDetail } from '../../../api/registerInfo.js';
export default {
    props: ['resumeOutVo', 'resumeId'],
    data() {
        return {
            education: [],
            sep: '',
            pickerOptions: {},
            form: {
                learnDay: [],
                step: 3
            },
            minDate: null,
            rules: {
                school: [
                    { required: true, message: '请输入学校名称', trigger: 'blur' },
                    { max: 20, message: '请输入20字以内', trigger: 'change' }
                ],
                education: [{ required: true, message: '请选择学历', trigger: 'change' }],
                major: [
                    { required: true, message: '请输入所学专业', trigger: 'change' },
                    { max: 20, message: '请输入20字以内', trigger: 'change' }
                ],
                learnDay: [{ required: true, message: '请选择就读时间', trigger: 'change' }],
                email: [
                    { required: true, message: '请输入电子邮箱', trigger: 'blur' },
                    { type: 'email', message: '电子邮箱格式不正确', trigger: 'change' },
                    { max: 40, message: '请输入40字以内', trigger: 'change' }
                ]
            }
        };
    },
    components: {},
    created() {
        this.pickerOptions.onPick = range => {
            this.minDate = range.minDate;
        };
        this.pickerOptions.disabledDate = time => {
            if (this.minDate) {
                return time.getTime() < new Date(this.minDate) || time.getTime() > Date.now();
            } else {
                return time.getTime() > Date.now();
            }
        };
        let temp = {};
        temp.step = 3;
        temp.school =
            this.resumeOutVo.resumeEducationOutVo && this.resumeOutVo.resumeEducationOutVo.length
                ? this.resumeOutVo.resumeEducationOutVo[0].school
                : '';

        this.getDegreeAction();
        this.getInfo();
    },
    watch: {
        'form.learnDay': function(val) {
            if (val) {
                this.sep = '-';
                this.minDate = null;
            } else {
                this.minDate = null;
                this.sep = '';
            }
        }
    },
    methods: {
        getDegreeAction() {
            getDegree().then(res => {
                if (res.success) {
                    this.education = res.data.education || [];
                } else {
                    this.$message.error(`${res.msg}`);
                }
            });
        },
        next(formName) {
            //                this.$refs[formName].validate((valid) => {
            //                    if (valid) {
            //
            //                    } else {
            //                        return false;
            //                    }
            //                });
            let tempForm = {};
            for (let key in this.form) {
                if (key != 'learnDay') {
                    tempForm[key] = this.form[key];
                }
            }
            tempForm.startTime = this.form.learnDay[0];
            tempForm.endTime = this.form.learnDay[1];
            tempForm.step = 3;
            tempForm.resumeId = this.resumeId || '';
            this.$emit('save', tempForm);
        },
        preAction() {
            this.$emit('goBack');
        },
        getInfo() {
            getDetail(3).then(res => {
                if (res.success) {
                    if (res.data) {
                        this.form = res.data ? { ...this.form, ...res.data } : { ...this.form };
                        this.form.learnDay = [];
                        this.form.learnDay.push(res.data.startTime);
                        this.form.learnDay.push(res.data.endTime);
                        //    this.form.learnDay = teArr;
                        this.form.resumeId ? '' : (this.form.resumeId = this.resumeId);
                        this.form.step = 3;
                    }
                } else {
                    this.$message.error(`${res.msg}`);
                }
            });
        }
    }
};
</script>

<style scoped>
.title {
    color: #222222;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 38px;
}
.bg {
    width: 100%;
    background: #f8f8f8;
    padding: 12px 24px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    display: inline-block;
}
.sub-style > div:first-child {
    width: 237px;
}
.sub-style > div:last-child {
    width: 107px;
}
.save-box {
    display: flex;
}
.el-button {
    height: 44px;
    font-size: 16px;
    margin-top: 29px;
}
.save-box .el-button:first-child {
    width: 128px;
    margin-right: 38px;
}
.save-box .el-button:last-child {
    flex: 1;
}
</style>